<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>20220924</title>
	</head>
	<body>
		
		<!-- 新增节点： 第一步相当于生了个娃, 第二步相当于给娃上户口. -->
		<!-- <div class="container">
		</div>
		<script>
			//1.创建新节点
			let newdiv=document.createElement('div');
			newdiv.id='newdiv';
			newdiv.className='one';
			newdiv.innerHTML='helloo';
			console.log(newdiv);
			//页面没有显示 
			//此处创建的节点 并没有被挂到dom树上 因此浏览器页面中是显示不出来的
			
			// 2.把节点挂在dom树上
			// 使用appendChild可以吧节点插入到某个节点的子元素中
			let container=document.querySelector('.container');
			container.appendChild(newdiv);
		</script> -->
		
		
		
		
		<!-- 删除节点 -->
		<!-- <div class="container"></div>
		<button>删除div</button>
		<script>
			let newdiv=document.createElement('div');
			newdiv.id='newdiv';
			newdiv.className='one';
			newdiv.innerHTML='helloo';
			console.log(newdiv);
			let container=document.querySelector('.container');
			container.appendChild(newdiv);
			// 删除节点 removeChild方法来实现
			// 得先拿到父节点 然后再拿到待删除的子节点
			// 通过 removeChild 就可以删除了
			let btn=document.querySelector('button');
			btn.onclick=function(){
				container.removeChild(newdiv);
			}
		</script> -->
		
		
		
		
		
		
		
		
		
		
		
		
		
		<!-- 在HTML中，表示类名的属性就是class
		但是在JS里属性名变成了className / classlist为啥不直接使用class这个名字 
		因为class在JS中也是一个关键字(JS ES6版本以上，也引入了类这个概念)
		如果要修改的样式比较多，通过style来修改就麻烦了.可以直接借助css类来修改.
		夜间模式(关灯开灯) -->
		<!-- <style>
			.light{
				background-color: white;
				color: black;
			}
			.dark{
				background-color: black;
				color: white;
			}
		</style>
		<div class="light" style="height: 300px;">夜间模式</div>
		<button>关灯</button>
		<script>
			let div=document.querySelector('div');
			let btn=document.querySelector('button');
			btn.onclick=function(){
				if(div.className==='light'){
					div.className='dark';
					btn.innerHTML='开灯'
				}
				else if(div.className==='dark'){
					div.className='light';
					btn.innerHTML='关灯'
				}
			}
		</script> -->
		
		
		
		
		
		
		
		
		
		
		
		<!-- 字体放大
		css不区分大小写 style="font-size:"    访问字体大小div.style.fontSize -->
		
		<!-- <div style="font-size: 20px">字体放大</div>
		<script>
			let div=document.querySelector('div');
			div.onclick=function(){
				// 1.获取当前字体大小
				console.log(div.style.fontSize);
				console.log(typeof(div.style.fontSize));
				let val=parseInt(div.style.fontSize)
				// 2.当前字体+5
				val+=5;
				// 3.单位不能忘 不然浏览器识别就会失效
				div.style.fontSize=val+'px';
				console.log(val)
			} 
		</script> -->
		
		
		
		
		
		
		
		
		
		
		<!-- 多选框全选 少选事件 -->
		<!-- <label>
			<input type="checkbox" id="all">全选<br>
		</label>
		<label>
			<input type="checkbox" class="rest">小猫<br>
		</label>
		<label>
			<input type="checkbox" class="rest">小狗<br>
		</label>
		<label>
			<input type="checkbox" class="rest">小猪<br>
		</label>
		<label>
			<input type="checkbox" class="rest">小鸟<br>
		</label>
		<script>
			//1.先获取元素
			let all=document.querySelector('#all');
			let rest=document.querySelectorAll('.rest');
			//querySelectorAll这里All忘记了 看了半天
			//2.给all注册点击事件
			all.onclick=function(){
				for(let i=0;i<rest.length;i++){
					rest[i].checked=all.checked;
					//all.checked就是这个负选框的选中状态
				}
			}
			//3.针对每个rest注册点击事件，实现对all的取消操作
			for(let i=0;i<rest.length;i++){
				rest[i].onclick=function(){
					all.checked=judgerest(rest);
				}
			}
			//判定是不是所有的rest都被选中
			function judgerest(rest){
				for(let i=0;i<rest.length;i++){
					if(!rest[i].checked){
						return '';
					}
				}
				return 'checked';
			}
		</script> -->
		
		
				
				
				
				
				
		
		
	</body>
</html>
